<template>
  <cloudPage :isLoading="isLoading">
    <cloudHeader slot="gHeader">
      <view class="grace-header-body">
        <!-- 返回按钮 -->
        <view
          class="grace-header-icons grace-icons icon-arrow-left"
          style="color: #fff"
          @tap.stop="handleNavBack"
        ></view>
        <!-- 中间内容 -->
        <view
          class="grace-header-content-noflex grace-text-center"
          style="color: #fff; font-size: 36rpx"
        >
          {{ $t("mf.good.config_order") }}
        </view>
        <!-- 右侧按钮 -->
        <view class="icons grace-icons"></view>
      </view>
    </cloudHeader>
    <view class="container" v-if="!isLoading">
      <!-- <view class="detail_top_bg"></view> -->
      <!-- 头部盒子信息，用户名，产品名 -->
      <view class="top_box">
        <view class="box_list flex">
          <view class="flex1">{{ $t("mf.good.username") }}</view>
          <view class="box_list_data">{{ user.username }}</view>
        </view>
        <view class="box_list flex">
          <view class="flex1">{{ $t("mf.good.goodname") }}</view>
          <!-- <view class="box_list_data">{{ detail.name }}</view> -->
          <view class="box_list_data" v-if="locale == 'zh_TW'">{{
            detail.goods_info.name
          }}</view>
          <view class="box_list_data" v-else>{{
            detail.goods_info.name_en
          }}</view>
        </view>
      </view>
      <!-- 购买信息 -->
      <view class="top_box">
        <view class="box_list flex">
          <view class="flex1">{{ $t("mf.good.good_price") }}</view>
          <view class="box_list_data" style="color: #ffdb82"
            >{{ detail.sell_price
            }}<text style="font-size: 24rpx">USDT</text> ≈{{ MFCAmont
            }}<text style="font-size: 24rpx">M</text>
          </view>
        </view>
        <view class="box_list flex">
          <view class="flex1">{{ $t("mf.good.get_power") }}</view>
          <view class="box_list_data">{{ detail.power_total }}TB</view>
        </view>
        <view class="box_list flex">
          <view class="flex1">{{ $t("mf.good.concart_crycle") }}</view>
          <view class="box_list_data"
            >{{ detail.cycle_day - detail.shifang_day }}天</view
          >
        </view>
      </view>
      <!-- 我的余额 -->
      <view class="my_balance flex">
        <image src="/static/mf/home/coin/M.png" />
        <view class="balance_name">M</view>
        <view class="able_balance"
          >{{ $t("mf.good.able_balance")
          }}<text style="color: #fff">{{ coin.balance }}</text></view
        >
      </view>
      <!-- 协议 -->
      <view class="agreement">
        <graceCheckBtn
          :checked="agreement"
          @change="checkedChange"
          checkedColor="#FEECBF"
          :size="32"
        >
          <text class="agreement_text">{{ $t("mf.shop.agree_info") }}</text>
        </graceCheckBtn>
      </view>
      <view class="buy_box flex" v-if="!isLoading">
        <view class="flex1 good_price"
          ><text style="font-size: 24rpx; color: rgba(255, 255, 255, 0.6)"
            >{{ $t("new.total_amount") }}：</text
          >{{ totalPrice }}<text style="font-size: 26rpx">M</text></view
        >
        <button class="now_buy" @tap.stop="openPass">
          {{ $t("mf.good.now_pay") }}
        </button>
      </view>
    </view>
    <cloudPayPassword
      :show="showpay"
      @keyboardDone="payPasswordDone"
      @close="togglePayPassword"
    >
    </cloudPayPassword>
  </cloudPage>
</template>

<script>
import { mapActions, mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      isLoading: false,
      detail: null,
      number: 1,
      agreement: false,
      showpay: false,
      goodid: null,
      mfc: null,
      coin: null,
    };
  },
  methods: {
    ...mapActions("user", ["loadUser"]),
    ...mapActions("mf/shop", [
      "getGoodInfo",
      "buyGood",
      "mfcPrice",
      "buyOrder",
    ]),
    ...mapActions("mf/my", ["coinBalance", "orderDetail"]),
    // 增加数量
    addNumber() {
      if (this.number >= this.detail.stock) {
        this.makeToast({ title: "剩余库存不足" });
        return;
      }
      this.number += 1;
    },
    // 减少数量
    minusNumber() {
      if (this.number <= 1) {
        return;
      }
      this.number -= 1;
    },
    // 是否同意协议
    checkedChange() {
      this.agreement = !this.agreement;
    },
    // 打开密码
    openPass() {
      // console.log("pass");
      if (!this.agreement) {
        this.makeToast({ title: this.$t("agreement") });
        return;
      }
      this.showpay = true;
    },
    // 关闭密码
    togglePayPassword() {
      this.showpay = false;
    },
    // 密码输入完成
    async payPasswordDone(data) {
      this.togglePayPassword();
      await this.buyOrder({
        order_id: this.detail.id,
        pay_password: data.password,
      });
      this.makeToast({ title: this.$t("mf.c2c.buy_success") });
      setTimeout(() => {
        this.handleNavBack();
      }, 1500);
      console.log("???");
    },
  },
  computed: {
    ...mapState("user", ["user"]),
    ...mapGetters("system", ["locale"]),
    getPower() {
      return this.number * this.detail.power;
    },
    totalPrice() {
      return this.MFCAmont * this.number;
    },
    MFCAmont() {
      return parseFloat(this.detail.sell_price / this.mfc.USDT).toFixed(2);
    },
  },
  async onLoad(option) {
    this.goodid = option.id;
    this.isLoading = true;
    await this.loadUser();
    this.detail = await this.orderDetail({ id: option.id, type: "sell" });
    this.mfc = await this.mfcPrice();
    this.coin = await this.coinBalance({ symbol: "M" });
    this.isLoading = false;
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  padding-top: 40rpx;
  box-sizing: border-box;
  padding-bottom: 120rpx;
}
/* .center {
  left: 50%;
  transform: translateX(-50%);
} */
.detail_top_bg {
  width: 200%;
  height: 492rpx;
  background: #015fff;
  position: absolute;
  top: 0;
  left: -50%;
  border-radius: 0 0 50% 50%;
}
.top_box {
  width: 710rpx;
  min-height: 201rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  box-sizing: border-box;
  padding: 0 30rpx;
  transform: translateX(20rpx);
  margin-bottom: 30rpx;
}
.shadow {
  box-shadow: 0px 14rpx 30rpx 0px #ececec;
}
.box_list {
  width: 100%;
  height: 120rpx;
  border-bottom: 1px solid #151935;
  line-height: 120rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  align-items: center;
  font-weight: 300;
}
.box_list_data {
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 600;
  color: #fff;
  font-weight: 300;
}
.top_box .box_list:last-child {
  border-bottom: none;
}
.circle {
  width: 58rpx;
  height: 58rpx;
}
.number {
  width: 60rpx;
  text-align: center;
  line-height: 100rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
}
.my_balance {
  width: 710rpx;
  height: 112rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  transform: translateX(20rpx);
  align-items: center;
  box-sizing: border-box;
  padding: 0 30rpx;
  margin-bottom: 30rpx;
}
.my_balance image {
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}
.balance_name {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  flex: 1;
}
.able_balance {
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #898989;
}
.agreement {
  width: 100%;
  box-sizing: border-box;
  padding: 0 50rpx;
}
.agreement_text {
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
}
.buy_box {
  position: fixed;
  width: 100%;
  height: 120rpx;
  bottom: 0rpx;
  background: #232534;
  line-height: 120rpx;
  text-align: center;
  color: #fee8b2;
}
.good_price {
  font-size: 46rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #fee8b2;
}
.now_buy {
  width: 443rpx;
  height: 120rpx;
  text-align: center;
  line-height: 120rpx;
  padding: 0;
  border-radius: 0rpx;
  background-image: url("/static/mf/shop/buy_btn.png");
  background-size: 100% 100%;
}
</style>